/**
 * Created by 丶龟 on 2017/8/25.
 */

"use strict";

//=============
// 引入程序依赖
//=============
import React, { Component } from 'react' ;
import { connect } from 'react-redux' ;
import { Link, browserHistory } from 'react-router' ;

//images
import gantan from "../../static/img/h5/gantan.png";
import logo from "../../static/img/h5/logo.png";


class MobilePhoneContainer extends Component{
    constructor(props){
        super(props) ;
        this.state = {
            error : "" ,
        }
    }

    next(e){
        e.preventDefault() ;
        this.checkPhone();
       if(this.state.error != "1"){
           let param = this.refs.phone.value;
           //let sPhone = param.substr(0,3)+"****"+param.substr(7)+param;
           browserHistory.push(`/MobileBinding/${param}`);
       }
    }

    // App绑定手机(手机验证)
    checkPhone() {
        let phone = this.refs.phone.value;
        var zhengzphone = /^1[34578]\d{9}$/;
        if(!zhengzphone.test(phone) && this.refs.phone.value === ""){
            $(this.refs.wrongPhone).hide();
            $(this.refs.wrongNull).show();
            $(this.refs.wrongMessage).hide();
            this.state.error = "1";
        } else if(!zhengzphone.test(phone)){
            $(this.refs.wrongPhone).show();
            $(this.refs.wrongNull).hide();
            $(this.refs.wrongMessage).hide();
            this.state.error = "1";
        }else{
            $(this.refs.wrongPhone).hide();
            $(this.refs.wrongNull).hide();
            $(this.refs.wrongMessage).hide();
            this.state.error = "0";
        }
    }

    render(){
        return(
            <div className="login-form">
                <div className="logo"><img src={logo} alt="咪吱logo"/></div>
                <form>
                    <p className="username binding-p">绑定手机</p>
                    <div className="input-f">
                        <input type="text" className="input" placeholder="手机号" ref="phone" onBlur={this.checkPhone.bind(this)}/>
                        <div className="wrong" ref="wrongPhone">
                            <img src={gantan} alt="感叹"/>
                            <span>请输入正确的手机号</span>

                        </div>
                        <div className="wrong" ref="wrongMessage">
                            <img src={gantan} alt="感叹"/>
                            <span>该手机号已被绑定</span>

                        </div>
                        <div className="wrong" ref="wrongNull">
                            <img src={gantan} alt="感叹"/>
                            <span>请输入需注册的手机号码</span>

                        </div>
                    </div>
                    <button type="btn" className="form-btn orange-btn" onClick={this.next.bind(this)}>下一步</button>
                    <span className="form-a margin-1"><Link to="/" className="logon">返回登录</Link></span>
                </form>
            </div>
        )
    }
}

const MobilePhone = connect()(MobilePhoneContainer) ;

export { MobilePhone as default } ;
